<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
        box-shadow: 0 0 5px #d8c2b4;
        display: block;
        margin: 20px auto;
    }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
<script>
     // 获取画布
     let canvas=document.querySelector("canvas")
    // 获取一支笔
    let ctx=canvas.getContext("2d") 

    // 设置画布宽高
    canvas.width=600
    canvas.height=400
    // 线条宽度
    ctx.lineWidth=7


    // 移动坐标系
    ctx.translate(300,200)
    // 绘制整圆
    ctx.arc(0,0,100,0,Math.PI/180*360,false)
    // 描边
    ctx.stroke()  

    
    // 画笔移动到圆心
    ctx.moveTo(0,0) 
    // 计算右下角的终点
    let x=100*Math.cos(30*Math.PI/180)
    let y=100*Math.sin(30*Math.PI/180)

    ctx.lineTo(x,y)
    ctx.stroke()


    // 计算左下角的终点
    let x1=100*Math.cos(150*Math.PI/180)
    let y1=100*Math.sin(150*Math.PI/180)
    ctx.moveTo(0,0)
    ctx.lineTo(x1,y1)
    ctx.stroke()

    // 计算正上方发终点
    ctx.moveTo(0,0)
    ctx.lineTo(0,-100)
    ctx.stroke()





</script>
</html>